<template>
    <h2>显示列表</h2>
    <table class="table table-bordered">
        <tbody>
            <tr class="bg-primary">
                <td>图片</td>
                <td>姓名</td>
                <td>会员等级</td>
                <td>生日</td>
                <td>电话</td>
                <td>金额</td>
                <td>时间</td>
                <td>费用</td>
                <td>累计</td>
                <td>备注</td>
            </tr>
            <tr v-for="item in HuiyuanShow">
                <td><img :src="item.tuPian" style="display: '';max-width: 100px;max-height: 100px"></td>
                <td>{{item.name}}</td>
                <td>{{item.huiYuanDj}}</td>
                <td>{{item.shengre}}</td>
                <td>{{item.phone}}</td>
                <td>{{item.money}}</td>
                <td>{{item.date}}</td>
                <td>{{item.feiYong}}</td>
                <td>{{item.leiji}}</td>
                <td>{{item.beizhu}}</td>
                <td>
                    <a @click="Delete(item.id)" style="color: red;">删除</a>
                    <a @click="Update(item.id)" style="color: blue;">修改</a>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script setup lang="ts">

//引入组件
import { ref, reactive, onMounted } from "vue"
//bootstrap样式
import "bootstrap/dist/css/bootstrap.min.css"
//访问后端
import axios from "axios"
//路由(1)
import { useRouter } from "vue-router";

const router = useRouter();
const HuiyuanShow = ref([])
const getHuiyuanShow = () => {
    axios.get("http://localhost:5145/api/Huiyuan/GetHuiyuans").then(res => {
        HuiyuanShow.value = res.data;
    })
}
const Delete = (id:number) => {
    if (confirm("确认删除吗？？？")) {
        axios.delete("http://localhost:5145/api/Huiyuan/Delete?id=" + id).then(res => {
                if (res.data > 0) {
                alert("删除成功！！");
                getHuiyuanShow();
            }
            else {
                alert("删除失败！！");
            }
        })
        

    }
}
const Update = (id: number) => {
    router.push({
        path: '/HuiyuanUpdate',
        query: {
            id:id
        }
    });
}
//钩子函数
onMounted(() => {
    getHuiyuanShow();
})
</script>
